<!DOCTYPE html>
<html>
	<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title></title>
    <link rel="stylesheet" type="text/css" href="js/bootstrap.css"/>
		<script src="js/jquery-3.2.0.min.js"></script>
		<script src="/js/bootstrap.js"></script>
</head>

<body>
    <div class="container">
        <h1 class="page-header text-center">表格</h1>
		<p>
			(tr>td{$$$}*3)*5  ************************************************<br />
			五个 tr ，每个 tr 下面三个 td ，表格为五排三列<br />
			每个 tr 里的 td 内容，为001~003
		</p>

        <table class="table table-hover table-bordered table-striped table-condensed ">
            <tr>
                <th>class</th>
                <th>效果</th>
            </tr>
            <tr>
                <td>..table</td>
                <td>添加表格基本样式</td>
            </tr>
            <tr>
                <td>..table-hover</td>
                <td>鼠标悬停时背景颜色</td>
            </tr>
            <tr>
                <td>..table-bordered</td>
                <td>添加表格外边框</td>
            </tr>
            <tr>
                <td>..table-striped</td>
                <td>添加斑马条纹</td>
            </tr>
            <tr>
                <td>..table-condensed</td>
                <td>紧缩表格，表格变窄了一点，区别不大</td>
            </tr>
        </table>



        <h1 class="page-header text-center">状态类</h1>
        <table class="table">
            <tr>
                <th>class</th>
                <th>效果</th>
            </tr>
            <tr class="active">
                <td>..active</td>
                <td>灰色，鼠标悬停时的颜色</td>
            </tr>
            <tr class="success">
                <td>..success</td>
                <td>浅绿，标识成功或积极的动作</td>
            </tr>
            <tr class="info">
                <td>..info</td>
                <td>浅蓝，标识普通的提示信息</td>
            </tr>
            <tr class="warning">
                <td>..warning</td>
                <td>淡黄，标识实景或需要用户注意</td>
            </tr>
            <tr class="danger">
                <td>..danger</td>
                <td>红灰，标识危险或潜在的带来负面影响的动作</td>
            </tr>
        </table>
        
        <h1 class="page-header text-center">响应式表格</h1>
        <pre>
           响应式表格， table 要放在 div.table-responsive 中
            (div class="table-repsponsive")
                (table class="table")(/table)
            (/div)
        </pre>
        <div class="table-responsive">
                <table class="table">
                  <tr>
                      <th>000</th>
                      <th>000</th>
                      <th>000</th>
                      <th>000</th>
                      <th>000</th>
                      <th>000</th>
                      <th>000</th>
                  </tr>
                  <tr>
                      <td>111</td>
                      <td>111</td>
                      <td>111</td>
                      <td>111</td>
                      <td>111</td>
                      <td>111</td>
                      <td>111</td>
                  </tr>
                  <tr>
                      <td>111</td>
                      <td>111</td>
                      <td>111</td>
                      <td>111</td>
                      <td>111</td>
                      <td>111</td>
                      <td>111</td>
                </table>  
        </div>
        
        
    </div>
</body>
</html>
